<style type="text/css">
	.ui-tabs-vertical { width: 72.6em; }
    .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 13em; }
    .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
    .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
    .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
    .ui-tabs-vertical .ui-tabs-panel { padding: 0em; float: right; width: 58em;}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		//set up tabs
		$("#tabs").tabs({
			beforeLoad: function( event, ui ) {
	                ui.jqXHR.error(function() {
	                    ui.panel.html(
	                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
	                        "If this wouldn't be a demo." );
	                });
	        }
		});

		$('#tabs').removeClass("ui-widget-content");

		//set up tabs vertical
		$(function() {
	        $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
	        $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
	    });
	});
</script>
<div class="mbr-wrapper ui-widget-content ui-corner-all ui-helper-clearfix">
	<h3 class="ui-widget-header ui-corner-all widget-header">
		<img class="icon" src="<?=base_url()?>images/icon/meeting-room.png" />
		Booking Room Calendar
	</h3>
	<div id="tabs" class="widget-content">
		<ul>
			<li>
				<a href="<?=base_url()?>index.php/home/ajax_mbr">Preloaded</a>
			</li>
			<li>
				<a href="<?=base_url()?>index.php/home/ajax_mbr/">fristi</a>
			</li>
			<li>
				<a href="<?=base_url()?>index.php/home/ajax_mbr/">technical training</a>
			</li>
		</ul>
		<div id="tabs-1">
		</div>
	</div>
</div>
